<i [@eveboxSpinningLoaderAnimation]="loading > 0"
   class="fa fa-spinner fa-pulse evebox-loading-spinner" *ngIf="loading > 0"></i>
<br/>

<div class="row">
    <div class="col-auto">
        <h3 class="m-0">DHCP</h3>
    </div>
    <div class="col-6 ml-auto">
        <evebox-filter-input [queryString]="queryString"></evebox-filter-input>
    </div>
    <div class="col-auto">
        <button class="btn btn-secondary" type="button" (click)="refresh()">Refresh</button>
    </div>
</div>

<br/>

<div class="row">
    <div class="col-lg-9 col-md-12">
        <div class="card">
            <div class="card-header">
                Leases
            </div>
            <div class="card-body p-0 table-responsive">
                <table class="table table-striped table-hover table-sm">
                    <thead class="thead-dark">
                    <tr>
                        <th>Timestamp</th>
                        <th *ngIf="haveSensorName">Sensor</th>
                        <th>MAC</th>
                        <th>Assigned IP</th>
                        <th>Hostname</th>
                        <th>Lease Time</th>
                        <th>Lease Active</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let entry of report" [ngClass]="{'table-secondary': entry.active == false}">
                        <td>{{entry.timestamp | eveboxFormatTimestamp}}</td>
                        <td *ngIf="haveSensorName">{{entry.sensor}}</td>
                        <td><a [routerLink]="['/events', {q: quote(entry.client_mac)}]">{{entry.client_mac}}</a>
                        </td>
                        <td><a [routerLink]="['/reports/ip', {ip: entry.assigned_ip}]">{{entry.assigned_ip}}</a>
                        </td>
                        <td><a [routerLink]="['/events', {q: quote(entry.hostname)}]">{{entry.hostname}}</a></td>
                        <td>{{entry.lease_time}}</td>
                        <td>{{entry.active}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-12">
        <div class="row">
            <div class="col-md-4 col-lg-12 mb-2">
                <div class="card">
                    <div class="card-header">
                        DHCP Servers
                        <i class="fa fa-question-circle float-right" data-toggle="tooltip" data-placement="bottom"
                           title="DHCP servers found on network from DHCP events"></i>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item" *ngFor="let entry of servers">
                            {{entry.ip}}
                        </li>
                    </ul>
                </div>
            </div>

            <div class="col-md-4 col-lg-12 mb-2">
                <div class="card">
                    <div class="card-header">
                        MAC w/Multiple IP
                        <i class="fa fa-question-circle float-right" data-toggle="tooltip" data-placement="bottom"
                           title="MAC addresses that have been assigned to more than one unique IP address"></i>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item" *ngFor="let entry of mac">
                            {{entry}}
                        </li>
                        <li class="list-group-item" *ngIf="mac.length == 0">
                            None
                        </li>
                    </ul>
                </div>
            </div>

            <div class="col-md-4 col-lg-12 mb-2">
                <div class="card">
                    <div class="card-header">
                        IP s/Multiple MAC
                        <i class="fa fa-question-circle float-right" data-toggle="tooltip" data-placement="bottom"
                           title="IP addresses that have been assigned to more than one unique MAC address"></i>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item" *ngFor="let entry of ip">
                            {{entry}}
                        </li>
                        <li class="list-group-item" *ngIf="ip.length == 0">
                            None
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>

</div>
